<!DOCTYPE html>
<html lang="en">

<head>
    <title>User</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- link bootstrap.min.css -->
    <link href="./public/css/bootstrap.min.css" rel="stylesheet">

    <!-- add bootstrap plugin css file: notify: toastr.css; documents: http://www.jq22.com/jquery-info476 -->
    <link rel="stylesheet" href="./public/css/toastr.css">

    <!-- custom css file : profile.css -->
    <link rel="stylesheet" href="./public/css/user/profile.css">

    <!-- custom css style -->
    <style>
        html {
            margin-bottom: 65px
        }
        
        label {
            font-weight: 100;
        }
        
        .debug {
            border: 1px dotted red;
        }
        
        a.cus-section {
            text-decoration: none;
            color: black;
        }
        
        a>div:hover {
            background-color: whitesmoke;
        }
        /* task */
        
        .task-card:hover {
            transition: box-shadow .25s;
            box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
        }
    </style>
</head>

<body>

    <header>
        <nav class="navbar navbar-default">
            <div class="container">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
                        aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#">MOOC</a>
                </div>

                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <form class="navbar-form navbar-left">
                        <div class="form-group">
                            <input type="text" class="form-control" placeholder="Search">
                        </div>
                        <button type="submit" class="btn btn-default">Submit</button>
                    </form>
                    <ul class="nav navbar-nav navbar-right">
                        <li>
                            <a href="" data-toggle="modal" data-target="#intro_modal">Intro</a>
                        </li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Username <span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li><a href="#">Profile</a></li>
                                <li><a href="#">Settings</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a data-toggle="modal" data-target="#loginModal">Login</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
                <!-- /.navbar-collapse -->
            </div>
            <!-- /.container-fluid -->
        </nav>
    </header>

    <div>
        <div class="container">
            <div class="row profile">
                <!-- user profile sidebar -->
                <div class="col-md-3" style="margin-bottom: 30px;">
                    <div class="profile-sidebar">
                        <!-- SIDEBAR USERPIC -->
                        <div class="profile-userpic">
                            <img src="./public/img/avatar.png" class="img-responsive" alt="">
                        </div>
                        <!-- END SIDEBAR USERPIC -->
                        <!-- SIDEBAR USER TITLE -->
                        <div class="profile-usertitle">
                            <div class="profile-usertitle-name">
                                Hugo Hoo
                            </div>
                            <div class="profile-usertitle-job">
                                Student
                            </div>
                        </div>
                        <!-- END SIDEBAR USER TITLE -->
                        <!-- SIDEBAR BUTTONS -->
                        <div class="profile-userbuttons">
                            <button type="button" class="btn btn-primary btn-sm">Targets &nbsp;<span class="badge">5</span></button>
                            <button type="button" class="btn btn-danger btn-sm">Logout</button>
                        </div>
                        <!-- END SIDEBAR BUTTONS -->
                        <!-- SIDEBAR MENU -->
                        <div class="profile-usermenu">
                            <ul class="nav">
                                <li class="active" data-target="#overview">
                                    <a>
                                        <i class="glyphicon glyphicon-home"></i> Overview </a>
                                </li>
                                <li data-target="#setting">
                                    <a>
                                        <i class="glyphicon glyphicon-user"></i> Account Settings </a>
                                </li>
                                <li data-target="#tasks">
                                    <a>
                                        <i class="glyphicon glyphicon-ok"></i> Tasks </a>
                                </li>
                                <li data-target="#help">
                                    <a>
                                        <i class="glyphicon glyphicon-flag"></i> Help </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>

                <!-- user profile main content -->
                <div class="col-md-9">
                    <div class="profile-content">
                        <div id="overview">
                            <div class="alert alert-danger alert-dismissible fade in" role="alert">
                                <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
                                <h4>Oh snap! The final exam!</h4>
                                <p>Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor
                                    ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p>
                                <p style="margin-top: 10px;">
                                    <button type="button" class="btn btn-danger">Take this action</button>
                                </p>
                            </div>
                            <br>

                            <h4>Your Progress</h4>
                            <div class="progress" style="margin: 15px 0px;">
                                <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
                                    60%
                                </div>
                            </div>
                            <br/>

                            <!--<div class="row">
                                <div class="col-md-6">
                                    <h4>Video Progress</h4>
                                    <div class="progress" style="margin: 15px 0px;">
                                        <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width: 70%;">
                                            70%
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <h4>Test Progress</h4>
                                    <div class="progress" style="margin: 15px 0px;">
                                        <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%;">
                                            40%
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <br>-->

                            <h4>Learning Records</h4>
                            <canvas id="myChart" width="400" height="200"></canvas>
                        </div>

                        <div id="setting" style="display: none;">
                            <div class="row">
                                <div class="col-md-6">
                                    <h4>User Profile</h4>
                                    <form style="margin-top: 15px;">
                                        <div class="form-group">
                                            <label for="username">Username</label>
                                            <input type="text" class="form-control" id="username" value="Hugo Hoo" disabled>
                                        </div>
                                        <div class="form-group">
                                            <label for="Post">Post</label>
                                            <input type="text" class="form-control" id="Post" value="Student" disabled>
                                        </div>
                                        <div class="form-group">
                                            <label for="ID">ID</label>
                                            <input type="text" class="form-control" id="ID" value="20142480107" disabled>
                                        </div>
                                    </form>
                                    <br>

                                    <h4>Modify Password</h4>
                                    <form style="margin-top: 15px;">
                                        <div class="form-group">
                                            <label for="old_password">Old Password</label>
                                            <input type="password" class="form-control" id="old_password">
                                        </div>
                                        <div class="form-group">
                                            <label for="new_password">New Password</label>
                                            <input type="password" class="form-control" id="new_password">
                                        </div>
                                        <div class="form-group">
                                            <label for="re_new_password">Re-Password</label>
                                            <input type="password" class="form-control" id="re_new_password">
                                        </div>
                                        <button type="button" class="btn btn-primary" onclick="toastr.success('Operation successed.')">Submit</button>
                                        <button class="btn btn-default">Reset</button>
                                    </form>
                                    <br>
                                </div>
                                <div class="col-md-6">
                                    <h4>Subscribe</h4>
                                    <form style="margin-top: 15px;">
                                        <div class="form-group">
                                            <label for="email">Email</label>
                                            <input type="email" class="form-control" id="email" value="ooho.cn@gmail.com">
                                        </div>
                                        <p style="color: #d9534f;">Subscibe and you can get important infomation about your courses</p>
                                        <button type="button" class="btn btn-success" onclick="toastr.success('Operation successed.')">Subscribe</button>
                                        <button type="button" class="btn btn-default" onclick="toastr.info('Opoeration info.')" disabled="true">Unsubscribe</button>
                                    </form>
                                </div>
                            </div>
                        </div>

                        <div id="tasks" style="display: none;">
                            <h4>Tasks - Today</h4>
                            <div class="task-card" style="background-color: #fafafa; padding: 20px 15px; border: 1px solid #ddd; margin-bottom: 10px;">
                                <span class="glyphicon glyphicon-paperclip"></span>&nbsp;
                                <span>The first task</span>
                                <span class="pull-right">
                                    <span class="glyphicon glyphicon-ok" style="color: #00c853; cursor: pointer;"></span>&nbsp;&nbsp;
                                <span class="glyphicon glyphicon-search" style="color: #03a9f4; cursor: pointer;"></span>&nbsp;&nbsp;
                                <span class="glyphicon glyphicon-trash" style="color: red; cursor: pointer;"></span>&nbsp;
                                </span>
                            </div>
                            <div class="task-card" style="background-color: #fafafa; padding: 20px 15px; border: 1px solid #ddd; margin-bottom: 10px;">
                                <span class="glyphicon glyphicon-paperclip"></span>&nbsp;
                                <span>The second task</span>
                                <span class="pull-right">
                                    <span class="glyphicon glyphicon-ok" style="color: #00c853; cursor: pointer;"></span>&nbsp;&nbsp;
                                <span class="glyphicon glyphicon-search" style="color: #03a9f4; cursor: pointer;"></span>&nbsp;&nbsp;
                                <span class="glyphicon glyphicon-trash" style="color: red; cursor: pointer;"></span>&nbsp;
                                </span>
                            </div>
                            <div class="task-card" style="background-color: #fafafa; padding: 20px 15px; border: 1px solid #ddd; margin-bottom: 10px;">
                                <span class="glyphicon glyphicon-paperclip"></span>&nbsp;
                                <span>No complain, find the solution.</span>
                                <span class="pull-right">
                                    <span class="glyphicon glyphicon-ok" style="color: #00c853; cursor: pointer;"></span>&nbsp;&nbsp;
                                <span class="glyphicon glyphicon-search" style="color: #03a9f4; cursor: pointer;"></span>&nbsp;&nbsp;
                                <span class="glyphicon glyphicon-trash" style="color: red; cursor: pointer;"></span>&nbsp;
                                </span>
                            </div>

                            <br/>
                            <h4>Tasks - Future</h4>
                            <div class="task-card" style="background-color: #fafafa; padding: 20px 15px; border: 1px solid #ddd; margin-bottom: 10px;">
                                <span class="glyphicon glyphicon-time"></span>&nbsp;
                                <span>The first task</span>
                                <span class="pull-right">
                                    <span class="glyphicon glyphicon-ok" style="color: #00c853; cursor: pointer;"></span>&nbsp;&nbsp;
                                <span class="glyphicon glyphicon-search" style="color: #03a9f4; cursor: pointer;"></span>&nbsp;&nbsp;
                                <span class="glyphicon glyphicon-trash" style="color: red; cursor: pointer;"></span>&nbsp;
                                </span>
                            </div>

                            <div class="task-card" style="background-color: #fafafa; padding: 20px 15px; border: 1px solid #ddd; margin-bottom: 10px;">
                                <span class="glyphicon glyphicon-time"></span>&nbsp;
                                <span>No complain, find the solution.</span>
                                <span class="pull-right">
                                    <span class="glyphicon glyphicon-ok" style="color: #00c853; cursor: pointer;"></span>&nbsp;&nbsp;
                                <span class="glyphicon glyphicon-search" style="color: #03a9f4; cursor: pointer;"></span>&nbsp;&nbsp;
                                <span class="glyphicon glyphicon-trash" style="color: red; cursor: pointer;"></span>&nbsp;
                                </span>
                            </div>

                            <br/>
                            <h4>Tasks - Done</h4>
                            <div class="task-card" style="background-color: #fafafa; padding: 20px 15px; border: 1px solid #ddd; margin-bottom: 10px;">
                                <span class="glyphicon glyphicon-hourglass"></span>&nbsp;
                                <span>No complain, find the solution.</span>
                                <span class="pull-right">
                                    <!--<span class="glyphicon glyphicon-ok" style="color: #00c853; cursor: pointer;"></span>&nbsp;&nbsp;
                                <span class="glyphicon glyphicon-search" style="color: #03a9f4; cursor: pointer;"></span>&nbsp;&nbsp;-->
                                <span class="glyphicon glyphicon-trash" style="color: red; cursor: pointer;"></span>&nbsp;
                                </span>
                            </div>

                            <br/>

                            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#addTaskModal">
                                <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
                                New Task
                            </button>

                            <br/>
                            <br/>
                        </div>

                        <div id="help" style="display: none;">
                            <h4>Help</h4>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>

    <footer>
        <nav class="navbar navbar-default navbar-fixed-bottom">
            <div class="container">
                <div class="nav-header">
                    <a class="navbar-brand" href="">MOOC</a>
                </div>
                <p class="navbar-text navbar-right">Footer</p>
            </div>
        </nav>
    </footer>

    <!-- modal space -->
    <div class="modal fade" id="addTaskModal" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">New Task</h4>
                </div>
                <div class="modal-body">
                    <form action="">
                        <div class="form-group">
                            <input type="text" class="form-control" name="task" placeholder="new task">
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <!--<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>-->
                    <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="toastr.success('Add new task successed.')">Submit</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->

    <div class="modal fade" id="loginModal" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header" style="background-color: #337ab7; color: white; border-top-left-radius: 5px; border-top-right-radius: 5px;">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">Login</h4>
                </div>
                <div class="modal-body">
                    <form action="">
                        <div class="form-group">
                            <label for="username">Username</label>
                            <input id="username" type="text" class="form-control" name="username" placeholder="username">
                        </div>
                        <div class="form-group">
                            <label for="password">Password</label>
                            <input id="password" type="password" class="form-control" name="password" placeholder="password">
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <!--<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>-->
                    <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="toastr.success('Add new task successed.')">Submit</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->


    <!-- basic js files -->
    <script src="./public/js/jquery-3.1.1.min.js"></script>
    <script src="./public/js/bootstrap.min.js"></script>

    <!-- add bootstrap plugin js file: notify: toastr.js; documents: http://www.jq22.com/jquery-info476 -->
    <!-- documents: http://www.jq22.com/jquery-info476 -->
    <script src="./public/js/toastr.js"></script>

    <!-- add chart.js. -->
    <!-- documents: documents : http://www.chartjs.org/docs/ -->
    <script src="./public/js/Chart.js"></script>

    <!-- custom js file : user profile -->
    <script src="./public/js/user/profile.js"></script>

    <script>
        // Chart Sample
        var ctx = $("#myChart");
        var myChart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
                datasets: [{
                    label: '# of Votes',
                    data: [12, 19, 3, 5, 2, 3],
                    backgroundColor: [
                        'rgba(255, 99, 132, 0.2)',
                        'rgba(54, 162, 235, 0.2)',
                        'rgba(255, 206, 86, 0.2)',
                        'rgba(75, 192, 192, 0.2)',
                        'rgba(153, 102, 255, 0.2)',
                        'rgba(255, 159, 64, 0.2)'
                    ],
                    borderColor: [
                        'rgba(255,99,132,1)',
                        'rgba(54, 162, 235, 1)',
                        'rgba(255, 206, 86, 1)',
                        'rgba(75, 192, 192, 1)',
                        'rgba(153, 102, 255, 1)',
                        'rgba(255, 159, 64, 1)'
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero: true
                        }
                    }]
                }
            }
        });
    </script>

</body>

</html>